<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/axios.min.js"></script>
    <script src="qs/qs.js"></script>
</head>

<body>

   
    <input type="text" id="username">
    <input type="password" id="password">
    <br>
   
    <input type="button" value="post请求传参格式query string，格式FormData" onclick="sendBodyParams()">
    <input type="button" value="post请求传参格式query string，格式FormData" onclick="sendBodyParams2()">
    <br>
    <input type="file" id="file">
    <br>

    <input type="button" value="post请求，文件上传" onclick="sendBodyParams3()">
    <script>
        /*  
         请求报文体参数(请求体参数)
         注意：请求报文参数的携带会在请求报文头中增加Content-Type字段，该字段的目的是为了告知服务器参数的类型格式
                 自定义格式报文头
                     =>请求报文载荷，在浏览器中这个参数被命名为Request payload
 
 
                 表单文本报文体，在浏览器器中被命名为Form Data
                    =>请求头中描述数据类型为:Content-Type: application/x-www-form-urlencoded
                    =>参数以URL地址参数(查询参数格式)规则组成:key1=value1&key2=value2......
 
 
                 表单二进制报文体，在浏览器器中被命名为Form Data 
                    =>请求头中描述数据类型为:Content-Type: multipart/form-data
                    =>参数必须是一个特殊的表单数据对象FormData(必须通过new FormData)
             
 
         
         */



        function sendBodyParams() {


            axios.post("http://127.0.0.1:3000/test/body", "username=admin&password=555555")
                .then(function (res) {
                    console.log(res.data);
                }).catch(function (error) {
                    console.log(error);
                });
        }

        let user = { aa: 100, bb: 200 };
        console.log(Qs.stringify(user))//自动将对象转换为查询字符串的格式

        function sendBodyParams2() {
            let username=document.getElementById("username").value;
            let password=document.getElementById("password").value;
            let u={
                username,
                password
            };

            axios.post("http://127.0.0.1:3000/test/body", Qs.stringify(u))
                .then(function (res) {
                    console.log(res.data);
                }).catch(function (error) {
                    console.log(error);
                });
        }
        function sendBodyParams3(){
            let fileDom=document.getElementById("file");//获取文件的DOM对象
            // 文件的DOM对象.files 获取到文件列表
            // 文件的DOM对象.files[0] 获取当前选中图片的文件对象
            let file=fileDom.files[0];

            let fd=new FormData();
            // fd.append(key,value);//参数追加方法，支持二进制文件对象
            fd.append("username","vicky");
            fd.append("tel","12345678987");
            fd.append("pic",file);

            axios.post("http://127.0.0.1:3000/test/upload",fd)
            .then(function(res){
                let imgDom=new Image();
                imgDom.src=res.data.pic;
                document.body.appendChild(imgDom);
            }).catch(function(error){
                console.log(error);
            });
    

        }
    </script>
</body>

</html>